<template>
  <div style="width:1000px;margin:150px auto 80px auto">
    <div class="preview">
        <div class="templateInfo-top">
            <div class="templateInfo">
                <div class="templateName" v-if="type=='1'"><h1>{{template.screenName}}</h1></div>
                <div class="templateName" v-if="type=='2'"><h1>{{template.name}}</h1></div>
                <div class="details">
                    <!-- <div class="author" v-if="type=='1'">{{template.screenCreateBy}}</div>
                    <div class="author" v-if="type=='2'">{{template.createBy}}</div>
                    <div class="separator">|</div> -->
                    <div class="viewCount" title="浏览量"><div class="viewLogo"><i class="el-icon-view" style="cursor: pointer"></i></div>{{template.viewCount}}</div>
                    <div class="useCount" title="使用量"><div class="useLogo"><i class="el-icon-copy-document" style="cursor: pointer"></i></div>{{template.useCount}}</div>
                    <div class="starCount" title="收藏量"><div class="starLogo"><i class="el-icon-folder-add" style="cursor: pointer"></i></div>{{template.starCount}}</div>
                </div>
            </div>
            <div class="templateCreate">
                <div class="starIcon">
                    <el-tooltip class="item" effect="dark" content="收藏" placement="top">
                        <i
                            :class="getStarClass(template)"
                            tabindex="0"
                            @click="star(template)"
                            style="cursor: pointer"
                        ></i>
                    </el-tooltip>
                </div>
                <div>
                    <el-button type="primary" @click="createScreen(template)">立即创建</el-button>
                </div>
            </div>
        </div>
        <div class="templateCapture" @mouseenter="enterCapture" @mouseleave="leaveCapture">
            <img :src="basePath + template.capturePath" v-if="type=='1'"/>
            <div id="fullScreen" class="fullScreenButton" v-if="type=='1'" title="全屏预览" @click="fullScreenCapture(template)"><i class="el-icon-full-screen"/></div>
            <img :src="basePath + template.imagePath" v-if="type=='2'" class="market_itemImg"/>
        </div>
        <div class="templateInfo-bottom" v-if="type=='1'">
            <div class="templateIntroduction"><p>{{template.screenIntroduction}}</p></div>
            <div class="templateResolution">分辨率{{template.screenResolution}}</div>
            <div class="templateTags">
                <div class="tag" v-for="item in tags" v-if="item!=''">{{item}}</div>
            </div>
        </div>
    </div>
    <div class="hot">
        <div class="hot-top">
            <div class="hotTitle">
                <h2>热门推荐</h2>
                <div class="moreTemplates"  @click="back">
                    查看更多
                    <span><svg t="1657853260635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2211" width="14" height="14"><path d="M721.066667 486.4c0 12.8-4.266667 21.333333-12.8 29.866667l-332.8 332.8c-17.066667 17.066667-42.666667 17.066667-59.733334 0s-17.066667-42.666667 0-59.733334l302.933334-302.933333-302.933334-302.933333c-17.066667-17.066667-17.066667-42.666667 0-59.733334 17.066667-17.066667 42.666667-17.066667 59.733334 0l332.8 332.8c8.533333 8.533333 12.8 17.066667 12.8 29.866667z" p-id="2212"></path></svg></span>
                </div>
            </div>

        </div>
        <div class="hotCardList">
            <div class="hotCard" v-for="(item,index) in hotTemplatesList" @mouseenter="enterBox(index)" @mouseleave="leaveBox(index)" @click="viewMaterial(item)">
                <div class="hotCapture">
                    <div class="image-shadow" :id="['shadow'+index]">
                        <div style="display:flex;float: right;margin-top: 7px;">

                        <div class="bubble" @click.stop="star(item)" title="收藏"><i :class="getStarClass(item)"></i></div>
                        <div class="bubble" @click.stop="createScreen(item)" title="创建"><i class="el-icon-copy-document" style="font-size:24px"></i></div>
                        </div>
                    </div>
                    <img :src="basePath + item.capturePath" v-if="type=='1'">
                    <img :src="basePath + item.imagePath" v-if="type=='2'" class="market_itemImg"/>
                </div>
                <div class="hotCardIntro">
                    <div class="hotName" v-if="type=='1'">{{item.screenName}}</div>
                    <div class="hotName" v-if="type=='2'">{{item.name}}</div>
                    <div class="hotInfo">
                        <div class="hotStarCount">{{item.starCount}}次收藏</div>
                        <div>.</div>
                        <div class="hotUseCount">{{item.useCount}}次使用</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { getTemplate,listHotTemplates,useCountIncrease,viewCountIncrease,starCountIncrease,starCountDecrease } from "@/api/tool/datav/cmsTemplateInfo"
import { addFavorite,isExisted,userFavoriteList } from "@/api/tool/datav/favorite"
import { getUpload,fileTemplateList,updateTemplate,addUpload } from "@/api/tool/datav/fileUpload"
export default {
    created(){
        this.templateId = this.$route.query.id
        this.type = this.$route.query.type
        userFavoriteList().then(response => {
          if(response.code == 200){
            if(response.data.file){
              this.starFileList = response.data.file;
            }
            if(response.data.screen){
              this.starTemplateList = response.data.screen;
            }
          }
        });
        if(this.type == 1){
            getTemplate(this.templateId).then(response => {
                if(response.code == 200){
                    this.template = response.data
                    if(this.template.screenTag !=null){
                        this.tags = this.template.screenTag.split("$!@*#")
                    }
                }
            })
            this.queryParams.orderBy = ''
            listHotTemplates(this.queryParams).then(response => {
                this.hotTemplatesList = response.rows.slice(0,4)
            })
        }
        if(this.type == 2){
            getUpload(this.templateId).then(response => {
                if(response.code == 200){
                    this.template = response.data
                }
            })
            this.queryParams.orderBy = '0'
            fileTemplateList(this.queryParams).then(res => {
                if(res.code == 200){
                    this.hotTemplatesList = res.rows.slice(0,4)
                }
            })
        }
    },
    data(){
        return{
            //服务器根路径
            basePath: process.env.VUE_APP_BASE_API,
            // 遮罩层
            loading: true,
            //用于查询的id
            templateId:"",
            //素材类型
            type:"",
            //模板
            template: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyword:"",//关键字
                orderBy:"0",//排序
                belongto:null,//分类 
                deviceType:null,//设备类型
                scenario:null,//场景
                industry:null,//行业
                sort: null,//图片分类
                name:null,//图片名称
                queryType:"1",//是否收藏
            },
            tags:[], //标签
            hotTemplatesList:[], //热门模板列表
            starTemplateList:[],//收藏模板列表
            starFileList:[],//收藏素材列表
        }
    },
    methods:{
        createScreen(item){
            if(this.type == 1){
                let query = { screenId:item.screenId }
                useCountIncrease(query).then(res => {
                    this.$router.push({path: '/tool/datav/datavDraw', query: {screenId: '', temlateId: item.screenId}});
                })
            }
            if(this.type == 2){
                let data = {"uploadId":item.uploadId,"type":4};
                updateTemplate(data).then(response => {
                    if (response.code == 200) {
                        item.createBy = this.$store.getters.name;
                        addUpload(item).then(response => {
                        if (response.code == 200) {
                            this.msgSuccess("创建成功");
                        }
                        });
                    }
                });
            }
        },
        star(item){
            if(this.type == 1){
                let query = { screenId:item.screenId }
                addFavorite(query).then(res => {
                    if(res.data){
                        starCountIncrease(query).then(res => {
                            if(res.code == 200){
                                this.starTemplateList.push({imageUploadId:null,screenId:item.screenId})
                                this.msgSuccess("收藏成功");
                            }else{
                                this.msgError("收藏失败");
                            }
                        })
                    }
                    else{
                        starCountDecrease(query).then(res => {
                            if(res.code == 200){
                                let index = this.starTemplateList.findIndex(ele => ele.screenId === item.screenId)
                                this.starTemplateList.splice(index,1)
                                this.msgSuccess("取消收藏");
                            }else{
                                this.msgError("取消收藏失败");
                            }
                        })
                    }
                })
            }
            if(this.type == 2){
                let query = {"imageUploadId":item.uploadId};
                let data = {"uploadId":item.uploadId};
                //收藏
                addFavorite(query).then(response => {
                    if(response.data){
                        data.type = 2
                    }
                    else{
                        data.type = 3
                    }
                    updateTemplate(data).then(res => {
                        if (response.data && res.code == 200) {
                            //添加进收藏列表
                            this.starFileList.push({imageUploadId:item.uploadId,screenId:null})
                            this.msgSuccess("收藏成功");
                        }else if(response.data && res.code != 200){
                            this.msgError("收藏失败");
                        }else if(!response.data && res.code == 200){
                            //从收藏列表中删
                            let index = this.starFileList.findIndex(ele => ele.imageUploadId === item.uploadId)
                            this.starFileList.splice(index,1)
                            this.msgSuccess("取消收藏");
                        }else if(!response.data && res.code != 200){
                            this.msgError("取消收藏失败");
                        }
                    });
                })
            }
        },
        enterBox(index){
          document.getElementById('shadow'+index).style.display = "block";
        },
        leaveBox(index){
          document.getElementById('shadow'+index).style.display = "none";
        },
        enterCapture(){
            if(this.type == 1){
                document.getElementById('fullScreen').style.display = "block";
            }
        },
        leaveCapture(){
            if(this.type == 1){
                document.getElementById('fullScreen').style.display = "none";
            }
        },
        fullScreenCapture(template){
            const viewRuter = this.$router.resolve({path: "/tool/datav/datavRelease", query: {screenId: template.screenId}})
            window.open(viewRuter.href,'_blank')
        },
        //查看详情
        viewMaterial(item){
          let id = "";
          //更新应用模板查看数
          if(this.type == 1){
              id = item.id;
              let viewData = {screenId:item.screenId }
              viewCountIncrease(viewData).then(res => {
                if(res.code == 200){
                }
              })
          }
          //更新图片素材查看数
          else if(this.type == 2){
            id = item.uploadId;
            let data = {"uploadId":item.uploadId,"type":1};
            updateTemplate(data).then(response => {
              if (response.code == 200) {
              }
            }); 
          }
          const viewRuter = this.$router.resolve({path: "/cms/template", query: {id: id,type:this.type}})
          window.open(viewRuter.href,'_self')

        },
        //获取收藏样式
        getStarClass(item){
          if(this.type == 1){
            let result = this.starTemplateList.find(ele => ele.screenId === item.screenId)//判断是否包含大屏id
            if(result){
              return "el-icon-star-on"
            }else{
              return "el-icon-star-off"
            }
          }else if(this.type == 2){
            let result = this.starFileList.find(ele => ele.imageUploadId === item.uploadId)//判断是否包含图片id
            if(result){
              return "el-icon-star-on"
            }else{
              return "el-icon-star-off"
            }
          }
        },
        back(){
            this.$router.push({name: 'material',params:{type:this.type}});
        }
    },
}
</script>

<style lang="scss" scoped>
.preview {
    margin-bottom: 30px;
}
.templateInfo-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.templateInfo-top .templateCreate {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/deep/ .el-icon-star-on {
    font-size: 26px;
    color: #ffe156;
}
/deep/ .el-icon-star-off {
    font-size: 24px;
}
.templateCreate .starIcon {
    width: 50px;
    height: 35px;
    padding: 3px;
}
.templateInfo .templateName h1{
    margin-top: 0px;
}
.templateInfo .details{
    display: flex;
    flex-wrap: wrap;
}
.details .separator {
    margin: 0px 8px;
}
.details .viewCount {
    margin: 0px 10px 0px 0px;
    display: flex;
    flex-wrap: wrap;
}
.viewCount .viewLogo {
    width: 15px;
    height: 15px;
    margin-right: 3px;
}
.details .useCount {
    margin: 0px 10px 0px 0px;
    display: flex;
    flex-wrap: wrap;
}
.useCount .useLogo {
    width: 15px;
    height: 15px;
    margin-right: 3px;
}
.details .starCount {
    margin: 0px 10px 0px 0px;
    display: flex;
    flex-wrap: wrap;
}
.starCount .starLogo {
    width: 15px;
    height: 15px;
    margin-right: 3px;
}
.templateCapture {
    width: 100%;
    height: 560px;
    margin: 25px 0px 30px 0px;
    position: relative;
}
.templateCapture img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}
.fullScreenButton {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgb(192, 192, 192);
    padding-left: 7px;
    padding-top: 7px;
    position:absolute;
    right:10px;
    display: none;
    bottom: 10px;
    cursor: pointer;
}
.fullScreenButton:hover {
    background: rgba(255, 255, 255,1);
}
.templateIntroduction p {
    font-size: 18px;
}
.templateResolution {
    color: rgba(80, 80, 80,1);
    font-size: 14px;
}
.templateTags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}
.tag {
    height: 30px;
    margin-right: 10px;
    padding: 4px 20px;
    font-size: 14px;
    line-height: 24px;
    border: 1px solid #e9eaeb;
    border-radius: 4px;
}
.tag:hover {
    color: rgb(0, 109, 233);
}
.hotInfo {
    display: flex;
    flex-wrap: wrap;
    color: #878a8e;
}
.hotCardList {
    display: flex;
    flex-wrap: wrap;
}
.hotCard {
    padding-top: 10px;
    width: 23%;
    height: 150px;
    margin-right: 2%;
}
.hotCard:hover {
    cursor: pointer;
    padding-top: 0px;
    padding-bottom: 10px;
}
.hotCapture {
    width: 100%;
    height: 130px;
    position: relative;
}
.hotCapture img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    // border-radius: 6px;
}

.hot-top .hotTitle {
    margin-top: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.hot-top .hotTitle .moreTemplates{
    color: rgb(75, 75, 75);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}
.hotName {
    margin-top: 8px;
}
.hotSeparator {
    margin: 0px 5px;
}
.image-shadow{
  width: 100%;
  height: 100%;
  background-color: #221b1b4d;
  position:absolute;
  top: 0px;
  z-index: 2;
  display: none;
  border-radius: 6px;
}
.bubble{
  width: 32px;
  height: 32px;
  background-color: rgba(255,255,255,.88);
  padding: 3px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  text-align: center;
  color: rgb(0,0,0);
  margin-right: 5px;
}
.bubble:hover{
  background-color: rgba(255,255,255,1);
}
.hotStarCount{
    margin-top: 5px;
    margin-right: 5px;
    font-size: 12px;
}
.hotUseCount{
    margin-top: 5px;
    margin-left: 5px;
    font-size: 12px;
}
.hotCardIntro {
    border-style: solid;
    border-width: 1px;
    border-color: #efefef;
    background-color: white;
    border-top: 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 5px 5px 10px 5px;
}
.market_itemImg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
</style>
